<template>
  <view class="wrap">
    <u-search v-model="name" @search="search()" height="80"></u-search>
    <u-waterfall v-model="flowList" ref="uWaterfallRef">
      <template v-slot:left="{leftList}">
        <view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="viewGoods(item.id)">
          <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
          <u-lazy-load threshold="-450" border-radius="10" :image="'/api/file/img?name='+item.img"
                       :index="index"></u-lazy-load>
          <view class="demo-title">
            {{ item.name }}
          </view>
          <view class="demo-price">
            {{ item.price }}元/{{ getUnitText(item.unit) }}
          </view>
          <!--          <view class="demo-tag">-->
          <!--            <view class="demo-tag-owner">-->
          <!--              自营-->
          <!--            </view>-->
          <!--            <view class="demo-tag-text">-->
          <!--              放心购-->
          <!--            </view>-->
          <!--          </view>-->
          <view class="demo-shop">
            {{ item.userName }}
          </view>
          <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
        </view>
      </template>
      <template v-slot:right="{rightList}">
        <view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="viewGoods(item.id)">
          <u-lazy-load threshold="-450" border-radius="10" :image="'/api/file/img?name='+item.img"
                       :index="index"></u-lazy-load>
          <view class="demo-title">
            {{ item.name }}
          </view>
          <view class="demo-price">
            {{ item.price }}元/{{ getUnitText(item.unit) }}
          </view>
          <!--          <view class="demo-tag">-->
          <!--            <view class="demo-tag-owner">-->
          <!--              自营-->
          <!--            </view>-->
          <!--            <view class="demo-tag-text">-->
          <!--              放心购-->
          <!--            </view>-->
          <!--          </view>-->
          <view class="demo-shop">
            {{ item.userName }}
          </view>
          <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
        </view>
      </template>
    </u-waterfall>
    <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
  </view>
</template>

<script>
import {marketListApi, outlayListApi} from "@/network/api/api";
import {getUnitText} from "@/common/common";
import viewGoods from "@/pages/view-goods/view-goods.vue";

export default {

  data() {
    return {
      name: "",
      loadStatus: 'loadmore',
      flowList: [],
      list: []
    }
  },
  onLoad() {

  },
  onShow() {
    this.getData();
  },
  onReachBottom() {
    this.loadStatus = 'loading';
    // 模拟数据加载
    setTimeout(() => {
      this.loadStatus = 'loadmore';
    }, 1000)
  },
  methods: {
    viewGoods(id) {
      uni.navigateTo({
        url: "/pages/view-goods/view-goods?id=" + id
      })
    },
    getUnitText,
    getData() {
      const _this = this;
      marketListApi({name: _this.name}).then(res => {
        console.log(res)
        if (res.code === 200) {
          _this.flowList = res.data;
        } else {
          uni.showToast({
            title: "登录失败",
            icon: 'none'
          });
        }
      }).catch(err => {
        console.log(err)
      })
    },
    addRandomData() {
      // for (let i = 0; i < 10; i++) {
      //   let index = this.$u.random(0, this.list.length - 1);
      //   // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
      //   let item = JSON.parse(JSON.stringify(this.list[index]))
      //   item.id = this.$u.guid();
      //   this.flowList.push(item);
      // }
    },
    remove(id) {
      this.$refs.uWaterfallRef.remove(id);
    },
    search() {
      this.clear()
      this.getData()
    },
    clear() {
      this.$refs.uWaterfallRef.clear();
    }
  }
}
</script>

<style>
/* page不能写带scope的style标签中，否则无效 */
page {
  background-color: rgb(240, 240, 240);
}
</style>

<style lang="scss" scoped>
.demo-warter {
  border-radius: 8px;
  margin: 5px;
  background-color: #ffffff;
  padding: 8px;
  position: relative;
}

.u-close {
  position: absolute;
  top: 32rpx;
  right: 32rpx;
}

.demo-image {
  width: 100%;
  border-radius: 4px;
}

.demo-title {
  font-size: 30rpx;
  margin-top: 5px;
  color: $u-main-color;
}

.demo-tag {
  display: flex;
  margin-top: 5px;
}

.demo-tag-owner {
  background-color: $u-type-error;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 4rpx 14rpx;
  border-radius: 50rpx;
  font-size: 20rpx;
  line-height: 1;
}

.demo-tag-text {
  border: 1px solid $u-type-primary;
  color: $u-type-primary;
  margin-left: 10px;
  border-radius: 50rpx;
  line-height: 1;
  padding: 4rpx 14rpx;
  display: flex;
  align-items: center;
  border-radius: 50rpx;
  font-size: 20rpx;
}

.demo-price {
  font-size: 30rpx;
  color: $u-type-error;
  margin-top: 5px;
}

.demo-shop {
  font-size: 22rpx;
  color: $u-tips-color;
  margin-top: 5px;
}
</style>

<!--<template>-->
<!--  <view class="content">-->

<!--    <div id="he-plugin-standard"></div>-->
<!--    <u-field-->
<!--        v-model="mobile"-->
<!--        label="手机号"-->
<!--        placeholder="请填写手机号"-->
<!--    >-->
<!--    </u-field>-->
<!--    <u-button @click="getPhoneLocal(mobile)">查询</u-button>-->
<!--    <u-field-->
<!--        v-model="city"-->
<!--        label="邮编"-->
<!--        placeholder="请填写城市"-->
<!--    >-->
<!--    </u-field>-->
<!--    <u-button @click="getPost(city)">查询</u-button>-->
<!--    <u-field-->
<!--        v-model="start"-->
<!--        label="列车"-->
<!--        placeholder="请填写起始站"-->
<!--    >-->
<!--    </u-field>-->
<!--    <u-field-->
<!--        v-model="end"-->
<!--        label="列车"-->
<!--        placeholder="请填写终点站"-->
<!--    >-->
<!--    </u-field>-->
<!--    <u-button @click="getCar()">查询</u-button>-->

<!--    <view>{{ result }}</view>-->

<!--    <view class="post" v-if="resultPost.length>0">-->
<!--      <u-table>-->
<!--        <u-tr>-->
<!--          <u-th>省</u-th>-->
<!--          <u-th>市</u-th>-->
<!--          <u-th>县</u-th>-->
<!--          <u-th>详细</u-th>-->
<!--          <u-th>邮编</u-th>-->
<!--        </u-tr>-->
<!--        <u-tr v-for="item in resultPost">-->
<!--          <u-td>{{ item.province }}</u-td>-->
<!--          <u-td>{{ item.city }}</u-td>-->
<!--          <u-td>{{ item.area }}</u-td>-->
<!--          <u-td>{{ item.address }}</u-td>-->
<!--          <u-td>{{ item.postCode }}</u-td>-->
<!--        </u-tr>-->
<!--      </u-table>-->
<!--    </view>-->
<!--    <view class="post" v-if="resultCar.length>0">-->
<!--      <u-table>-->
<!--        <u-tr>-->
<!--          <u-th>出发</u-th>-->
<!--          <u-th>到达</u-th>-->
<!--          <u-th>耗时</u-th>-->
<!--          <u-th>距离</u-th>-->
<!--          <u-th>班次</u-th>-->
<!--        </u-tr>-->
<!--        <u-tr v-for="item in resultCar">-->
<!--          <u-td>{{ item.departuretime }}</u-td>-->
<!--          <u-td>{{ item.arrivaltime }}</u-td>-->
<!--          <u-td>{{ item.costtime }}</u-td>-->
<!--          <u-td>{{ item.distance }}</u-td>-->
<!--          <u-td>{{ item.trainno }}</u-td>-->
<!--        </u-tr>-->
<!--      </u-table>-->
<!--    </view>-->
<!--  </view>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      mobile: '',-->
<!--      city: '',-->
<!--      start: '',-->
<!--      end: '',-->
<!--      resultPost: [],-->
<!--      result: '',-->
<!--      resultCar: '',-->


<!--    };-->
<!--  },-->
<!--  mounted() {-->
<!--    this.insertWeather()-->
<!--  },-->
<!--  methods: {-->
<!--    getPhoneLocal(phone) {-->
<!--      const _this = this;-->
<!--      uni.request({-->
<!--        url: "https://eolink.o.apispace.com/teladress/teladress", //接口地址：前缀+方法中传入的地址-->
<!--        method: 'post', //请求方法：传入的方法或者默认是“GET”-->
<!--        data: {"mobile": phone}, //传递参数：传入的参数或者默认传递空集合-->
<!--        header: {-->
<!--          "X-APISpace-Token": "bb50juj0hzctc84a6dxou3lxq93d6yzl",-->
<!--          "Content-Type": "application/x-www-form-urlencoded"-->
<!--        },-->
<!--        success: (res) => {-->
<!--          console.log(res)-->
<!--          _this.result = res.data.data.province + res.data.data.city + res.data.data.isp-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    getPost(city) {-->
<!--      const _this = this;-->
<!--      uni.request({-->
<!--        url: "https://eolink.o.apispace.com/postcode/postcode", //接口地址：前缀+方法中传入的地址-->
<!--        method: 'post', //请求方法：传入的方法或者默认是“GET”-->
<!--        data: {"city": city}, //传递参数：传入的参数或者默认传递空集合-->
<!--        header: {-->
<!--          "X-APISpace-Token": "bb50juj0hzctc84a6dxou3lxq93d6yzl",-->
<!--          "Content-Type": "application/x-www-form-urlencoded"-->
<!--        },-->
<!--        success: (res) => {-->
<!--          console.log(res)-->
<!--          _this.resultPost = res.data.result.postCodeList-->
<!--        }-->
<!--      })-->
<!--    }-->
<!--    //返回的数据（不固定，看后端接口，这里是做了一个判断，如果不为true，用uni.showToast方法提示获取数据失败)-->
<!--    , getCar() {-->
<!--      const _this = this;-->
<!--      uni.request({-->
<!--        url: "/train/station2s?appkey=57738b9f4ddb2826&start=" + _this.start + "&end=" + _this.end, //接口地址：前缀+方法中传入的地址-->
<!--        method: 'post', //请求方法：传入的方法或者默认是“GET”-->
<!--        header: {-->
<!--          "X-APISpace-Token": "bb50juj0hzctc84a6dxou3lxq93d6yzl",-->
<!--          "Content-Type": "application/x-www-form-urlencoded"-->
<!--        },-->
<!--        success: (res) => {-->
<!--          console.log(res)-->
<!--          _this.resultCar = res.data.result.list-->
<!--        }-->
<!--      })-->
<!--    }-->
<!--    //返回的数据（不固定，看后端接口，这里是做了一个判断，如果不为true，用uni.showToast方法提示获取数据失败)-->
<!--    ,-->
<!--    close() {-->
<!--      var element = document.getElementById("he-plugin-standard");-->
<!--      element.style = null;-->

<!--      let str = ''-->
<!--      let latitude = ''-->
<!--      let longitude = ''-->
<!--      if (navigator.geolocation) {-->
<!--        console.log(str);-->
<!--        navigator.geolocation.getCurrentPosition(function (position) {-->
<!--          latitude = position.coords.latitude;//获取纬度-->
<!--          longitude = position.coords.longitude;//获取经度-->
<!--          str = "位置：" + longitude.toString().slice(0, 6) + "," + latitude.toString().slice(0, 5)-->
<!--          console.log(str);-->
<!--        });-->
<!--      } else {-->
<!--        console.log(str);-->
<!--      }-->

<!--    },-->
<!--    insertWeather() {-->
<!--      const _this = this-->
<!--      window.WIDGET = {-->
<!--        "CONFIG": {-->
<!--          "layout": "2",-->
<!--          "width": 500,-->
<!--          "height": 700,-->
<!--          "background": "1",-->
<!--          "dataColor": "FFFFFF",-->
<!--          "language": "zh",-->
<!--          "city": "CN101190301",-->
<!--          "key": "82898b167593451b81c7ce87a89135d0"-->
<!--        }-->
<!--      }-->
<!--      let script = document.createElement('script')-->
<!--      script.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0'-->
<!--      document.body.appendChild(script)-->

<!--      setTimeout(function () {-->
<!--        _this.close()-->
<!--      }, "50")-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
<!--<style lang="css">-->
<!--#he-plugin-standard {-->
<!--  width: 100% !important;-->
<!--  font-size: 20px;-->
<!--  background-image: url("https://cdn.qweather.com/img/plugin/190516/bg/view/100d.png");-->
<!--  background-repeat: no-repeat;-->
<!--  background-position: left top;-->
<!--  background-size: auto 100%;-->
<!--  border-radius: 0px;-->
<!--}-->
<!--</style>-->